<template>
    <div class="pieces-panel-shadow" :style="warperStyle">

        <div class="editor-surfaces-background" :style="warperBackgroundStyle"></div>
        <slot />

        <div class="editor-surfaces-shadow" :style="shadowNameStyle">
            <div class="shadow-left" :style="leftSize"><i :style="shadowLeftStyle"></i></div>
            <div class="shadow-right" :style="rightSize"><i :style="shadowRightStyle"></i></div>
            <div class="shadow-bottom"></div>
        </div>
    </div>
</template>

<script>
import { mapGetters } from "vuex";
export default {
    props: {
        spu: { type: String, default: '' },
    },
    data () {
        return {
            inner_width: 0, // 内容区宽度
            name_width: 0, // 设计面的宽度
            name_left: 0, // 名称的偏移
            outer_width: 0, // 外面容器的宽度
        };
    },
    computed: {
        ...mapGetters("designer", {
            pieces: "getPieces",
            activePiece: "getActivePiece",
            piecesPrice: "getPiecesPrice",
        }),
        // x的偏移
        offset () {
            const left = Math.min(this.name_left, Math.max(0, this.inner_width + this.name_left - this.outer_width))
            const right = Math.max(0, this.inner_width - left - this.name_width)
            return {
                left: left,
                right: right
            }
        },

        leftSize () {
            return { width: Math.min(16, Math.max(1, this.offset.left)) + 'px' }
        },

        rightSize () {
            return { width: Math.min(16, Math.max(1, this.offset.right)) + 'px' }
        },

        warperStyle () {
            return {
                left: -this.offset.left + 'px'
            }
        },

        warperBackgroundStyle () {
            return {
                borderTopLeftRadius: Math.min(6, 0.5 * this.offset.left) + 'px',
                borderTopRightRadius: Math.min(6, 0.5 * this.offset.right) + 'px',
            }
        },
        shadowNameStyle () {
            return {
                width: this.name_width + 'px',
                left: this.offset.left + 'px',
            }
        },
        shadowLeftStyle () {
            return {
                borderBottomRightRadius: Math.min(6, 0.5 * this.offset.left) + 'px',
            }
        },
        shadowRightStyle () {
            return {
                borderBottomLeftRadius: Math.min(6, 0.5 * this.offset.right) + 'px',
            }
        }
    },

    watch: {
        piecesPrice () {
            setTimeout(() => this.doResize(), 1);
        },
        activePiece () {
            setTimeout(() => this.doResize(), 1);
        }
    },
    methods: {

        doResize () {
            const inner = this.$el.getBoundingClientRect();
            const name = this.$el.closest('.editor-surfaces-piece').getBoundingClientRect()
            const outer = this.$el.closest('.editor-surfaces-outer').getBoundingClientRect()

            this.inner_width = inner.width;
            this.name_width = name.width
            this.name_left = name.left - outer.left
            this.outer_width = outer.width
        },
    },
    mounted () {
        this.doResize()
        window.addEventListener("resize", this.doResize);
    },

    // 销毁
    beforeDestroy: function () {
        window.removeEventListener("resize", this.doResize);
    },
};
</script>
<style lang="scss" scoped>
.pieces-panel-shadow {
    position: absolute;
    margin-top: -1px;

    .editor-surfaces-background {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        top: 0;
        box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.1);
        border: 1px solid #e0e0e0;
        border-radius: 6px;
        background-color: #fff;
    }

    .editor-surfaces-shadow {
        position: absolute;
        left: 0;
        top: -31px;
        height: 31px;
        box-sizing: border-box;

        &::before {
            content: '';
            position: absolute;
            left: 0;
            top: 0;
            right: 0;
            height: 24px;
            border: 1px solid #e0e0e0;
            border-radius: 6px 6px 0 0;
            box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.1);
            background-color: #fff;
            overflow: hidden;
        }

        & > .shadow-bottom {
            position: absolute;
            left: 1px;
            right: 1px;
            bottom: -2px;
            height: 10px;
            background: #fff;
        }

        & > .shadow-left {
            position: absolute;
            right: 100%;
            margin-right: -1px;
            bottom: -1px;
            width: 16px;
            max-width: 16px;
            height: 16px;
            background: #fff;
            overflow: hidden;

            & > i {
                position: absolute;
                right: 0;
                bottom: 0;
                width: 30px;
                height: 30px;
                border: 1px solid #e0e0e0;
                border-radius: 6px;
                box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.1) inset;
            }
        }

        & > .shadow-right {
            position: absolute;
            left: 100%;
            margin-left: -1px;
            bottom: -1px;
            width: 16px;
            max-width: 16px;
            height: 16px;
            background: #fff;
            overflow: hidden;

            & > i {
                position: absolute;
                left: 0;
                bottom: 0;
                width: 30px;
                height: 30px;
                border: 1px solid #e0e0e0;
                border-radius: 6px;
                box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.1) inset;
            }
        }
    }
}
</style>
